<template>
	<div>
		<el-form-item label-width="80px" label="商品信息:" prop="numIids">
			<el-select
				v-model="goodsCircle.favoritesId"
				@change="selectExitSelectConfig"
				filterable
				remote
				placeholder="请选择现有选品库"
			>
				<el-option v-for="item in favorites" :key="item.key" :label="item.label" :value="item.key" />
			</el-select>
			<span>-</span>
			<el-select
				v-model="goodsCircle.numIids"
				@change="selectLocalSelectConfig"
				filterable
				remote
				multiple
				placeholder="请选择本地商品库"
				style="width:60%"
			>
				<el-option
					v-for="item in localFavorites"
					:key="item.key"
					:label="item.label"
					:value="item.key"
				/>
			</el-select>
		</el-form-item>
	</div>
</template>

<script>
export default {
	data() {
		return {
			goodsCircle: {
				title: '',
				authorInfo: {},
				author: '',
				authorImg: '',
				content: '',
				favoritesId: null,
				numIids: []
			},
			favorites: [],
			localFavorites: [],
			listQuery: {
				liilType: 2, //1,为系统基础配置,不可调节;2暂定为朋友圈选品库,不传查询全部
				enableStatus: 1, //：启用状态（默认查询启用）；-1废弃
				authorStatus: 1 //1,有效的发布者
			}
		}
	},
	methods: {
		//改变value值，实现 联动， 给下拉框绑定change事件
		selectExitSelectConfig(val) {
			this.localFavorites = []
			;(this.goodsCircle.numIids = null), this.getLocalSelectConfig()
		},
		selectLocalSelectConfig(val) {
			console.log(val)
		},
		getExitSelectConfig() {
			this.$api.operation
				.getExitSelectConfig({
					liilType: 2,
					status: this.listQuery.enableStatus
				})
				.then(res => {
					if (res.data.code == 200) {
						let arr = []
						res.data.result.forEach((res, index) => {
							arr[index] = {
								key: res.favoritesId,
								label: res.favoritesTitle
							}
						})
						this.favorites = arr
						this.getLocalSelectConfig()
					}
				})
		},
		getLocalSelectConfig() {
			this.$api.operation
				.getLocalSelectConfig({
					favoritesId: this.goodsCircle.favoritesId
				})
				.then(res => {
					if (res.data.code == 200) {
						let arr = []
						res.data.result.forEach((res, index) => {
							arr[index] = {
								key: res.numIid,
								label: res.title
							}
						})
						this.localFavorites = arr
					}
				})
		}
	},
	computed: {
		contentShortLength() {
			return this.goodsCircle.content.length
		}
	},
	mounted() {
		this.getExitSelectConfig()
	},
	watch: {
		favorites: {
			handler(newValue, oldValue) {},
			deep: true
		},
		localFavorites: {
			handler(newValue, oldValue) {},
			deep: true
		}
	},
	created() {
		this.getExitSelectConfig()
	}
}
</script>

<style lang="scss" scoped>
</style>